<template>
  <div class="main-container custom-el-plus">
    <div class="top-search-box">
      <el-input
        v-model="state.searchText"
        style="width: 360px"
        placeholder="请输入设备名称或ID"
        :suffix-icon="Search"
      />
      <el-button type="primary" @click="searchDevice">查询</el-button>
      <el-button plain @click="resetSearch">重置</el-button>
    </div>
    <div class="bottom-box">
      <div class="bottom-inner-box">
        <div class="not-reviewed">
          <div class="head-box">
            <div class="head-icon"></div>
            <span class="head-title">未审核设备</span>
          </div>
          <div class="not-reviewed-table-box">
            <el-table
              :data="state.notReviewedList"
              style="width: 100%"
              class="style-table"
            >
              <el-table-column
                type="index"
                :index="getIndex"
                label="序号"
                width="80"
              />
              <el-table-column
                prop="deviceName"
                label="设备名称"
                show-overflow-tooltip
              >
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.deviceName
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.deviceName"
                    maxlength="20"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceId"
                label="设备编号"
                show-overflow-tooltip
              />
              <el-table-column prop="deviceManufacturer" label="设备厂商">
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.deviceManufacturer
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.deviceManufacturer"
                    maxlength="30"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="deviceAddress" label="设备位置" width="150" show-overflow-tooltip>
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.deviceAddress
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.deviceAddress"
                    maxlength="30"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceLogLat"
                label="设备经纬度"
                width="300"
              >
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.longitude + ", " + props.row.latitude
                  }}</span>
                  <div v-else class="select-btn-box">
                    <span>{{
                      props.row.longitude + ", " + props.row.latitude
                    }}</span>
                    <span class="select-btn" @click="openMap(props.row)"
                      >地图选点</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceAddressId"
                label="设备位置ID"
                show-overflow-tooltip
              />
              <el-table-column prop="onlineStatus" label="设备状态">
                <template #default="props">
                  <div class="status-box">
                    <div
                      v-if="props.row.onlineStatus"
                      class="online-icon"
                    ></div>
                    <div v-else class="outline-icon"></div>
                    <span>{{ props.row.onlineStatus ? "在线" : "离线" }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="relationDeviceNumber"
                label="关联视频设备数量"
                width="150"
                show-overflow-tooltip
              />
              <el-table-column label="操作" width="200">
                <template #default="scope">
                  <div class="btn-box">
                    <el-button
                      class="btn-edit"
                      text
                      size="small"
                      v-if="!scope.row.editFlag"
                      :disabled="state.isHasEdit"
                      @click="showEditItem(scope.row)"
                      >编辑</el-button
                    >
                    <div v-else>
                      <el-button
                        text
                        size="small"
                        class="btn-save"
                        @click="saveDeviceInfo(scope.row)"
                        >保存</el-button
                      >
                      <el-button
                        text
                        size="small"
                        class="btn-cancle"
                        @click="cancleSave(scope.row)"
                        >取消</el-button
                      >
                    </div>
                    <el-button
                      text
                      size="small"
                      class="btn-review"
                      :disabled="state.isHasEdit"
                      @click="reviewedConfirm(scope.row)"
                      >完成审核</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-box">
            <el-pagination
              style="margin-left: auto"
              v-model:current-page="state.currentPage"
              :small="small"
              :background="true"
              :page-size="state.pageSize"
              layout="total, prev, pager, next"
              :total="state.notReviewedTotalNum"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <div class="have-reviewed">
          <div class="head-box">
            <div class="head-icon"></div>
            <span class="head-title">已审核设备</span>
          </div>
          <div class="have-reviewed-table-box">
            <el-table
              :data="state.haveReviewedList"
              style="width: 100%"
              class="style-table"
            >
              <el-table-column
                type="index"
                :index="getPassIndex"
                label="序号"
                width="80"
              />
              <el-table-column
                prop="deviceName"
                label="设备名称"
                show-overflow-tooltip
              >
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.deviceName
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.deviceName"
                    maxlength="20"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="deviceId" label="设备编号" show-overflow-tooltip/>
              <el-table-column prop="deviceManufacturer" label="设备厂商">
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.deviceManufacturer
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.deviceManufacturer"
                    maxlength="30"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="deviceAddress" label="设备位置" width="150" show-overflow-tooltip>
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.deviceAddress
                  }}</span>
                  <el-input
                    v-else
                    v-model="props.row.deviceAddress"
                    maxlength="30"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="deviceLogLat"
                label="设备经纬度"
                width="300"
              >
                <template #default="props">
                  <span v-if="!props.row.editFlag">{{
                    props.row.longitude + ", " + props.row.latitude
                  }}</span>
                  <div v-else class="select-btn-box">
                    <span>{{
                      props.row.longitude + ", " + props.row.latitude
                    }}</span>
                    <span class="select-btn" @click="openMap(props.row)"
                      >地图选点</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="deviceAddressId" label="设备位置ID" show-overflow-tooltip/>
              <el-table-column prop="onlineStatus" label="设备状态">
                <template #default="props">
                  <div class="status-box">
                    <div
                      v-if="props.row.onlineStatus"
                      class="online-icon"
                    ></div>
                    <div v-else class="outline-icon"></div>
                    <span>{{ props.row.onlineStatus ? "在线" : "离线" }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="relationDeviceNumber"
                label="关联视频设备数量"
                width="150"
                show-overflow-tooltip
              />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <div class="btn-box">
                    <el-button
                      class="btn-edit"
                      text
                      size="small"
                      v-if="!scope.row.editFlag"
                      :disabled="state.isHasEdit"
                      @click="showEditItem(scope.row)"
                      >编辑</el-button
                    >
                    <div v-else>
                      <el-button
                        text
                        size="small"
                        class="btn-save"
                        @click="saveReviewedDeviceInfo(scope.row)"
                        >保存</el-button
                      >
                      <el-button
                        text
                        size="small"
                        class="btn-cancle"
                        @click="cancleSave(scope.row)"
                        >取消</el-button
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-box">
            <el-pagination
              style="margin-left: auto"
              v-model:current-page="state.currentPassPage"
              :small="small"
              :page-size="state.passPageSize"
              :background="true"
              layout="total, prev, pager, next"
              :total="state.haveReviewedTotalNum"
              @current-change="handleReviewedCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="state.mapDialogVisible"
      width="auto"
      destroy-on-close
      align-center
      title="地图选点"
    >
      <div class="pic-dialog">
        <div class="img-content">
          <div class="map-container" id="devicePositionMap"></div>
          <div class="btn-group">
            <el-button @click="cancelSelect">取消</el-button>
            <el-button type="primary" @click="submitLatLog">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  h,
  watch,
  nextTick,
} from "vue";

// 引入请求方法
import MapInit from "@/utils/mineMap/MapInit";
import MapMarker from "@/utils/mineMap/mapMarker.js";
const { proxy } = getCurrentInstance();
// 引入图片
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

const state = reactive({
  deviceName: "",
  deviceId: "",
  deviceTypeList: [],
  directionList: [],
  deviceType: null,
  deviceStatu: null,
  currentPage: 1,
  pageSize: 10,
  currentPassPage: 1,
  passPageSize: 10,
  mapDialogVisible: false,
  notReviewedList: [],
  notReviewedTotalNum: 0,
  haveReviewedList: [],
  haveReviewedTotalNum: 0,
  isHasEdit: false,
});
const mapObject = {
  darkMapObj: null,
  deviceMarker: null,
  clickLat: null,
  clicklog: null,
  row: null,
};
//======================================事件方法===============================
const resetSearch = () => {
  state.isHasEdit = false;
  state.searchText = "";
  state.deviceName = "";
  state.deviceId = "";
  getMasterControllerLsit({
    reviewStatus: 0,
  }).then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
  getMasterControllerLsit({
    reviewStatus: 1,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
};
const searchDevice = () => {
  state.isHasEdit = false;
  getMasterControllerLsit({
    reviewStatus: 0,
  }).then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
  getMasterControllerLsit({
    reviewStatus: 1,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
};
const saveDeviceInfo = (row) => {
  //先校验数据
  let param = {
    pkId: row.pkId,
    longitude: row.longitude,
    latitude: row.latitude,
    deviceManufacturer: row.deviceManufacturer,
    deviceName: row.deviceName,
    deviceAddress: row.deviceAddress,
  };
  const { result, message } = validControllerInfo(param);
  if (!result) {
    ElMessage({
      message: message,
      type: "warning",
      duration: 2000,
    });
    return;
  }
  updateMasterController(param).then((res) => {
    ElMessage({
      message: "编辑成功",
      type: "success",
      duration: 2000,
    });
    getMasterControllerLsit({
      reviewStatus: 0,
      pageNum: state.currentPage,
    }).then((res) => {
      state.notReviewedList = res.list;
      state.notReviewedTotalNum = res.total;
      state.isHasEdit = false;
      row.editFlag = !row.editFlag;
    });
  });
};

const saveReviewedDeviceInfo = (row) => {
  //先校验数据
  let param = {
    pkId: row.pkId,
    deviceAddress: row.deviceAddress,
    longitude: row.longitude,
    latitude: row.latitude,
    deviceManufacturer: row.deviceManufacturer,
    deviceName: row.deviceName,
  };
  const { result, message } = validControllerInfo(param);
  if (!result) {
    ElMessage({
      message: message,
      type: "warning",
      duration: 2000,
    });
    return;
  }
  updateMasterController(param).then((res) => {
    ElMessage({
      message: "编辑成功",
      type: "success",
      duration: 2000,
    });
    getMasterControllerLsit({
      reviewStatus: 1,
      pageNum: state.currentPassPage,
    }).then((res) => {
      state.haveReviewedList = res.list;
      state.haveReviewedTotalNum = res.total;
      state.isHasEdit = false;
      row.editFlag = !row.editFlag;
    });
  });
};
const reviewedConfirm = (row) => {
  ElMessageBox({
    title: "",
    cancelButtonClass: "messagebox-cancel-btn",
    confirmButtonClass: "messagebox-confirm-btn",
    customStyle: {
      backgroundColor: "#0D172F",
      borderRadius: "8px",
    },
    message: h("p", null, [
      h(
        "div",
        { style: "color: #A5ADBA; margin: 2.781vh 0 3.708vh 0.624vw" },
        "确认完成此设备审核?"
      ),
    ]),
    showCancelButton: true,
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "loading...";
        finishReview({
          reviewStatus: 1,
          pkId: row.pkId,
        }).then((res) => {
          done();
          instance.confirmButtonLoading = false;
          getMasterControllerLsit({
            reviewStatus: 0,
            pageNum: state.currentPage,
          }).then((res) => {
            state.notReviewedList = res.list;
            state.notReviewedTotalNum = res.total;
            state.isHasEdit = false;
          });
          getMasterControllerLsit({
            reviewStatus: 1,
            pageNum: state.currentPassPage,
          }).then((res) => {
            state.haveReviewedList = res.list;
            state.haveReviewedTotalNum = res.total;
          });
        });
      } else {
        done();
      }
    },
  }).then((action) => {
    ElMessage({
      type: "success",
      message: `审核成功`,
      duration: 2000,
    });
  });
};
const showEditItem = (row) => {
  row.editFlag = !row.editFlag;
  state.isHasEdit = true;
};
const cancleSave = (row) => {
  row.editFlag = !row.editFlag;
  state.isHasEdit = false;
};
const getIndex = (index) => {
  return (state.currentPage - 1) * state.pageSize + index < 9
    ? "0" + ((state.currentPage - 1) * state.pageSize + (index + 1))
    : (state.currentPage - 1) * state.pageSize + (index + 1);
};
const getPassIndex = (index) => {
  return (state.currentPassPage - 1) * state.currentPassPage + index < 9
    ? "0" + ((state.currentPassPage - 1) * state.currentPassPage + (index + 1))
    : (state.currentPassPage - 1) * state.currentPassPage + (index + 1);
};
const openMap = (row) => {
  state.mapDialogVisible = true;
  nextTick(() => {
    mapObject.clickLat = row.latitude;
    mapObject.clicklog = row.longitude;
    mapObject.row = row;
    initMap(row.latitude, row.longitude).then(() => {
      addDeviceMarker(row.latitude, row.longitude);
    });
  });
};
const cancelSelect = () => {
  state.mapDialogVisible = false;
};
const submitLatLog = () => {
  state.mapDialogVisible = false;
  mapObject.row.latitude = Math.round(mapObject.clickLat * 1000000) / 1000000;
  mapObject.row.longitude = Math.round(mapObject.clicklog * 1000000) / 1000000;
};
const handleCurrentChange = (val) => {
  state.isHasEdit = false;
  state.haveReviewedList.map((item) => {
    item.editFlag = false;
  });
  getMasterControllerLsit({
    pageNum: val,
    reviewStatus: 0,
  }).then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
};
const handleReviewedCurrentChange = (val) => {
  state.isHasEdit = false;
  state.notReviewedList.map((item) => {
    item.editFlag = false;
  });
  getMasterControllerLsit({
    pageNum: val,
    reviewStatus: 1,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
};
//======================================自定义方法===============================
const validControllerInfo = (param) => {
  let message = "";
  let result = true;
  if (!param.deviceName) {
    message = "请输入设备名称";
    result = false;
    return { result, message };
  }
  if (isAllWhitespace(param.deviceName)) {
    message = "设备名称不能全为空格";
    result = false;
    return { result, message };
  }
  if (!param.deviceAddress) {
    message = "请输入设备位置";
    result = false;
    return { result, message };
  }
  if (isAllWhitespace(param.deviceAddress)) {
    message = "设备位置不能全为空格";
    result = false;
    return { result, message };
  }
  if (!param.longitude || !param.latitude) {
    message = "请在地图选择设备经纬度";
    result = false;
    return { result, message };
  }
  return { result, message };
};
const isAllWhitespace = (str) => {
  return /^\s*$/.test(str);
};
const isNumber = (value) => {
  return typeof value === "number" && !isNaN(value);
};
//初始化地图
const initMap = (lat = 40.76546125305629, log = 114.88923193324109) => {
  return new Promise((resolve, reject) => {
    mapObject.darkMapObj = new MapInit("devicePositionMap", {
      center: [log, lat],
      pitch: 0,
      zoom: 16,
    });
    mapObject.darkMapObj.on("click", (evt) => {
      removeMarker();
      addDeviceMarker(evt.lngLat.lat, evt.lngLat.lng);
      mapObject.clickLat = evt.lngLat.lat;
      mapObject.clicklog = evt.lngLat.lng;
    });
    let time = setInterval(() => {
      if (mapObject.darkMapObj && mapObject.darkMapObj.isStyleLoaded()) {
        clearInterval(time);
        resolve();
      }
    }, 100);
  });
};
//添加位置点标记
const addDeviceMarker = (lat, log) => {
  if (!lat || !log) {
    ElMessage({
      message: "点坐标错误,请重新选择",
      type: "warning",
      duration: 3000,
    });
    return;
  }
  mapObject.deviceMarker = new MapMarker(mapObject.darkMapObj, {
    lnglat: [log, lat],
    pkId: "",
    properties: {},
    width: "40px",
    height: "46px",
    url: "url(/ivam/mapPin.png)",
  });
};
//删除点标记
const removeMarker = () => {
  if (mapObject.deviceMarker) {
    mapObject.deviceMarker.remove();
    mapObject.deviceMarker = null;
  }
};

//======================================接口方法==================================
// 获取主控机列表
const getMasterControllerLsit = async (param) => {
  const res = await proxy.$http.postWithBody(
    "device/masterComputer/query",
    Object.assign(
      {
        deviceName: state.deviceName,
        deviceId: state.deviceId,
        reviewStatus: "",
        pageSize: 10,
        pageNum: 1,
      },
      param
    )
  );
  if (JSON.stringify(res) == "{}") {
    throw res;
  }
  return res;
};
// 完成主控机审核
const finishReview = async (param) => {
  const res = await proxy.$http.postWithBody(
    "device/masterComputer/changeReviewStatus",
    param
  );
  if (res == 0) {
    throw res;
  }
  return res;
};
const updateMasterController = async (param) => {
  const res = await proxy.$http.postWithBody(
    "device/masterComputer/update",
    param
  );
  if (res == 0) {
    throw res;
  }
  return res;
};
//======================================钩子函数==================================
watch(
  () => state.searchText,
  (newVal, oldVal) => {
    state.deviceName = "";
    state.deviceId = "";
    if (newVal) {
      if (isNumber(+newVal)) {
        state.deviceId = newVal;
      } else {
        state.deviceName = newVal;
      }
    }
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  getMasterControllerLsit({
    reviewStatus: 0,
  }).then((res) => {
    state.notReviewedList = res.list;
    state.notReviewedTotalNum = res.total;
  });
  getMasterControllerLsit({
    reviewStatus: 1,
  }).then((res) => {
    state.haveReviewedList = res.list;
    state.haveReviewedTotalNum = res.total;
  });
});
</script>
    
  <style scoped lang="scss">
.main-container {
  background-color: #000102;
  padding: 0 !important;
  :deep(.el-select) {
    .el-select__wrapper {
      width: 100%;
    }
  }
  & > .top-search-box {
    height: pxTvh(88);
    margin: pxTvh(24) pxTvw(24) 0 pxTvw(24);
    background: #0d172f;
    border-radius: 4px;
    @include elasticFN(flex-start, center);
    & > .el-input {
      margin-left: pxTvw(16);
    }
    & > .el-button:nth-of-type(1) {
      margin-left: auto;
    }
    & > .el-button:nth-of-type(2) {
      margin-right: pxTvw(24);
      margin-left: pxTvw(16);
    }
  }
  & > .bottom-box {
    margin: pxTvh(24) pxTvw(12) 0 pxTvw(12);
    height: calc(100% - #{pxTvh(198)});
    :deep(.el-input) {
      .el-input__inner {
        height: calc(32 / 1080* 100vh - 2px) !important;
        line-height: calc(32 / 1080 * 100vh - 2px) !important;
      }
    }
    & > .bottom-inner-box {
      margin: 0 auto pxTvh(24) auto;
      overflow-y: auto;
      width: pxTvw(1872);
      height: pxTvh(863);
      background: #0d172f;
      border-radius: 4px;
      & > .not-reviewed {
        margin: 0 pxTvw(16);
        padding-top: pxTvh(16);
        & > .head-box {
          height: pxTvh(32);
          @include elasticFN(flex-start, center);
          & > .head-icon {
            width: 4px;
            height: 13px;
            background: #3174ff;
          }
          & > .head-title {
            font-family: PingFang SC, PingFang SC, sans-serif;
            font-weight: 500;
            @include computed_font(16);
            color: #e8f1ff;
            margin-left: pxTvw(12);
          }
        }
        & > .not-reviewed-table-box {
          margin-top: pxTvh(16);
          background: transparent;
          & > .style-table {
            background-color: transparent !important;
            width: 100%;
            .btn-box {
              color: #377dff;
              @include elasticFN(flex-start, center);
              & > .btn-edit {
                padding: 0;
              }
              & > .btn-edit:hover {
                background: transparent;
                opacity: 0.5;
              }
              .btn-save {
                padding: 0;
              }
              .btn-cancle,
              .btn-review {
                padding: 0;
                margin-left: pxTvw(16);
              }

              .btn-save:hover,
              .btn-cancle:hover,
              .btn-review:hover {
                opacity: 0.5;
                background: transparent;
              }
            }
          }
        }
        & > .page-box {
          margin-top: pxTvh(16);
        }
      }
      & > .have-reviewed {
        margin: pxTvw(24) pxTvw(16) 0 pxTvw(16);
        padding-bottom: pxTvh(16);
        & > .head-box {
          height: pxTvh(32);
          @include elasticFN(flex-start, center);
          & > .head-icon {
            width: 4px;
            height: 13px;
            background: #3174ff;
          }
          & > .head-title {
            font-family: PingFang SC, PingFang SC, sans-serif;
            font-weight: 500;
            @include computed_font(16);
            color: #e8f1ff;
            margin-left: pxTvw(12);
          }
        }
        & > .have-reviewed-table-box {
          margin-top: pxTvh(16);
          background: transparent;
          & > .style-table {
            background-color: transparent !important;
            width: 100%;
            .btn-box {
              color: #377dff;
              @include elasticFN(flex-start, center);
              & > .btn-edit {
                padding: 0;
              }
              & > .btn-edit:hover {
                background: transparent;
                opacity: 0.5;
              }
              .btn-save {
                padding: 0;
              }
              .btn-cancle,
              .btn-review {
                padding: 0;
                margin-left: pxTvw(16);
              }

              .btn-save:hover,
              .btn-cancle:hover,
              .btn-review:hover {
                opacity: 0.5;
                background: transparent;
              }
            }
          }
          .style-table {
            background-color: transparent !important;
            width: 100%;
          }
        }
        & > .page-box {
          margin-top: pxTvh(16);
        }
      }
    }
  }
  & > .bottom-box::-webkit-scrollbar-thumb {
    background: #20325d;
  }
  .pic-dialog {
    // width: pxTvw(400);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .img-content {
      margin-top: pxTvh(16);
      padding: 0 pxTvh(16);
      color: rgba(207, 219, 252, 0.8);
      box-sizing: border-box;
      & > #devicePositionMap {
        width: pxTvw(1168);
        height: pxTvh(657);
      }
      & > .btn-group {
        margin-top: pxTvh(24);
        display: flex;
        justify-content: end;
      }
    }
  }
}

.carditemlist-move,
.carditemlist-enter-active,
.carditemlist-leave-active {
  transition: all 1s ease;
}
.carditemlist-enter-from,
.carditemlist-leave-to {
  opacity: 0;
  transform: translate(-500px, 0px) scale(0);
}
.carditemlist-leave-active {
  position: absolute;
}
.status-box {
  @include elasticFN(flex-start, center);
  & > .online-icon {
    margin-right: pxTvw(8);
    width: pxTvw(8);
    height: pxTvw(8);
    background: #34ad54;
    border-radius: 50%;
  }
  & > .outline-icon {
    margin-right: pxTvw(8);
    width: pxTvw(8);
    height: pxTvw(8);
    background: #a5adba;
    border-radius: 50%;
  }
}
.select-btn-box {
  width: fit-content;
  padding: 0 pxTvw(8);
  height: pxTvh(32);
  line-height: pxTvh(32);
  background: #19284d;
  border-radius: 4px;
  & > .select-btn {
    font-family: PingFang SC, PingFang SC, sans-serif;
    font-weight: 400;
    @include computed_font(14);
    color: #377dff;
    margin-left: pxTvw(16);
    cursor: pointer;
  }
}
</style>

<style lang="scss">
</style>